<template>
  <div>
    <a-form ref="queryDeptFormRef" name="queryDeptForm" :model="queryDeptForm.data" :labelCol="{ span: 8 }" :wrapperCol="{ span: 14 }">
      <a-row :gutter="24">
        <a-col span="8">
          <a-form-item name="deptName" label="部门名称">
            <a-input v-model:value="queryDeptForm.data.deptName" allowClear></a-input>
          </a-form-item>
        </a-col>
        <a-col span="8">
          <a-form-item name="status" label="部门状态">
            <a-select v-model:value="queryDeptForm.data.status" :options="pageData.statusDict" allowClear> </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24" class="autoee-button-row">
        <a-col :span="12" style="text-align: left">
          <a-button type="primary" @click="openDeptAddModal()" v-hasPermi="['system:dept:add']"><AutoeeIcon icon="plus-outlined" />新增</a-button>
          <a-button type="primary" danger @click="clickDeleteDept()" :disabled="deptTableData.selectedRowKeys.length <= 0" v-hasPermi="['system:dept:remove']"><AutoeeIcon icon="delete-outlined" />删除</a-button>
        </a-col>
        <a-col :span="12" style="text-align: right">
          <a-button type="primary" @click="deptTablePage.reload()"> <AutoeeIcon icon="SearchOutlined" />查询 </a-button>
          <a-button @click="resetDeptQueryForm()"><AutoeeIcon icon="redo-outlined" />重置</a-button>
        </a-col>
      </a-row>
    </a-form>

    <a-table
      rowKey="deptId"
      :columns="deptTableData.columns"
      :data-source="deptTableData.dataSource"
      :loading="deptTablePage.loading.value"
      :pagination="deptTablePagination"
      @change="deptTableHandChangePage"
      :row-selection="{ selectedRowKeys: deptTableData.selectedRowKeys, onChange: onDeptTableSelectChange, type: 'radio' }"
      bordered
      size="small"
      tableLayout="fixed"
    >
      <template #bodyCell="{ index, column, record }">
        <template v-if="column.key === 'pageIndex'">
          {{ index + 1 }}
        </template>
        <template v-else-if="column.key === 'status'">
          <span>
            {{ AutoeeUtil.getDictLabelByKey(record.status, pageData.statusDict) }}
          </span>
        </template>
        <template v-else-if="column.key === 'deptTableOperateCol'">
          <span>
            <a @click="openDeptDetailModal(record)"> 查看 </a>
            <a-divider type="vertical" v-hasPermi="['system:dept:edit']" />
            <a @click="openDeptUpdateModal(record)" v-hasPermi="['system:dept:edit']"> 修改 </a>
          </span>
        </template>
      </template>
    </a-table>

    <DeptAddUpdateModal ref="deptAddUpdateModalRef" @querDeptTreeData="querDeptTreeData" :statusDict="pageData.statusDict" :deptTreeData="pageData.deptTreeData" />
    <DeptDetailModal ref="deptDetailModalRef" :statusDict="pageData.statusDict" :deptTreeData="pageData.deptTreeData" />
  </div>
</template>

<script setup name="Dept">
import { listDept, getDept, delDept, addDept, updateDept } from '@/api/system/dept';
import DeptAddUpdateModal from './addUpdateModal.vue';
import DeptDetailModal from './detailModal.vue';
import { computed, reactive, ref } from 'vue';
import { AutoeeIcon } from '@/utils/AutoeeIcon.js';
import AutoeeUtil from '@/utils/AutoeeUtil.js';
import { message } from 'ant-design-vue';
import { usePagination } from 'vue-request';

// 当前页面使用的数据
const pageData = reactive({
  statusDict: [],
  deptTreeData: [],
  deptTreeData: [],
});

AutoeeUtil.getDictsByType('sys_normal_disable').then((res) => {
  pageData.statusDict = res;
});
const querDeptTreeData = () => {
  AutoeeUtil.getDeptTreeData().then((res) => {
    pageData.deptTreeData = res.data;
    // pageData.deptTreeData.push({ id: 0, label: '无' });
  });
};
querDeptTreeData();

// 查询Form
const queryDeptFormRef = ref();
const queryDeptForm = reactive({ data: { params: {} } });

// 重置查询Form
const resetDeptQueryForm = () => {
  AutoeeUtil.resetFormFieldsToEmpty(queryDeptForm.data);
  deptTablePage.reload();
};

// 打开新增窗口
const deptAddUpdateModalRef = ref();
const openDeptAddModal = () => {
  deptAddUpdateModalRef.value.openAddModal(deptTablePage);
};

// 打开修改窗口
const openDeptUpdateModal = (record) => {
  deptAddUpdateModalRef.value.openUpdateModal(record, deptTablePage);
};

// 打开详细窗口
const deptDetailModalRef = ref();
const openDeptDetailModal = (record) => {
  deptDetailModalRef.value.openModal(record);
};

// 点击删除
const clickDeleteDept = () => {
  AutoeeUtil.confirmDeleteSelectedData(() => {
    delDept(deptTableData.selectedRowKeys).then((res) => {
      deptTableData.selectedRowKeys = [];
      AutoeeUtil.messageSuccess('删除操作成功。');
      // 操作后，更新部门下拉列表数据
      AutoeeUtil.getDeptTreeData().then((res) => {
        pageData.deptTreeData = res.data;
      });
      deptTablePage.reload();
    });
  });
};

// 列表数据
const deptTableData = reactive({
  // 列表数据
  dataSource: [],
  // 列表记录数
  total: 0,
  selectedRowKeys: [],
  // 列表列定义
  columns: [
    // {
    //   title: '序号',
    //   dataIndex: 'pageIndex',
    //   key: 'pageIndex',
    //   width: 50,
    //   align: 'center',
    // },
    {
      title: '部门id',
      key: 'deptId',
      dataIndex: 'deptId',
    },
    {
      title: '部门名称',
      key: 'deptName',
      dataIndex: 'deptName',
    },
    {
      title: '显示顺序',
      key: 'orderNum',
      dataIndex: 'orderNum',
    },
    {
      title: '负责人',
      key: 'leader',
      dataIndex: 'leader',
    },
    {
      title: '部门状态',
      key: 'status',
      dataIndex: 'status',
    },
    {
      title: '操作',
      key: 'deptTableOperateCol',
      width: 120,
    },
  ],
});

// 查询列表
const queryDeptList = () => {
  return listDept(queryDeptForm.data);
};

// 用户列表翻页数据：使用vue-request中分页方法，返回参数包含{ run, reload, loading, current, pageSize }
const deptTablePage = AutoeeUtil.usePaginationByHandleTree(queryDeptList, deptTableData, 'deptId');

// 用户列表翻页工具条：必须通过计算函数每次重新生成
const deptTablePagination = computed(() => AutoeeUtil.getTablePagination(deptTablePage));

// 手动翻页方法
const deptTableHandChangePage = (page, filters, sorter) => {
  AutoeeUtil.tableHandChangePage(deptTablePage, page, filters, sorter);
};

// 列表选中方法
const onDeptTableSelectChange = (selectedRowKeys) => {
  deptTableData.selectedRowKeys = selectedRowKeys;
};
</script>
<style lang="less"></style>
